<template>
  <div class="onemap">
    <div class="left"></div>
    <div class="right"></div>
    <div id="mars2dContainerszxc" class="mars3d-container"></div>
  </div>
</template>

<script lang="ts" setup>
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'maplibre-gl/dist/maplibre-gl.js';
// import MapboxLanguage from '@mapbox/mapbox-gl-language';
import useMapStore from '@/store/modules/map';
let map;

onMounted(() => {
  initMap();
});
const userStore = useMapStore();
const initMap = () => {
  const vecUrl = 'http://t0.tianditu.gov.cn/img_w/wmts?tk=f0e84d132c7462359e568e43fab0dd67';
  const cvaUrl = 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=f0e84d132c7462359e568e43fab0dd67';
  //实例化source对象
  var tdtVec = {
    //类型为栅格瓦片
    'type': 'raster',
    'tiles': [
      //请求地址
      vecUrl +
        '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
    ],
    //分辨率
    'tileSize': 256
  };
  var tdtCva = {
    'type': 'raster',
    'tiles': [
      cvaUrl +
        '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
    ],
    'tileSize': 256
  };

  var style = {
    //设置版本号，一定要设置
    'version': 8,
    //添加来源
    'sources': {
      'tdtVec': tdtVec,
      'tdtCva': tdtCva
    },
    'layers': [
      {
        //图层id，要保证唯一性
        'id': 'tdtVec',
        //图层类型
        'type': 'raster',
        //数据源
        'source': 'tdtVec'
      },
      {
        //图层id，要保证唯一性
        'id': 'tdtCva',
        //图层类型
        'type': 'raster',
        //数据源
        'source': 'tdtCva'
      }
    ]
  };

  map = new maplibregl.Map({
    container: 'mars2dContainerszxc', // container id
    style: style,
    hash: true,
    center: [111.061811, 30.848092], // starting position
    zoom: 12, // starting zoom
    minZoom: 2,
    maxZoom: 17
  });
  userStore.setMap3d(map);
};
</script>
<style lang="scss" scoped>
.left,
.right {
  position: absolute;
  top: 10px;
  bottom: 12px;
  background-size: auto 100%;
  z-index: 31;
  background-repeat: no-repeat;
}
.left {
  left: -8px;
  width: 40px;
  background-image: url('@/assets/common/左边.png');
}
.right {
  right: 8px;
  width: 30px;
  background-image: url('@/assets/common/右边.png');
}
.Map3DView {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.onemap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  height: 100%;
  // background-image: url('~@/assets/images/header/content_bg.png');
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  .mars3d-container {
    height: 100%;
    width: 100%;
  }
}
</style>
